<template>
	<view style="margin-top:20px;">

		<!-- 导航条 -->
		<view class="cu-custom" :style="{height: $wanlshop.wanlsys().height + 'px' }">
			<view class="cu-bar fixed"
				:style="{ height: $wanlshop.wanlsys().height + 'px', paddingTop: $wanlshop.wanlsys().top + 'px'}">
				<view class="action" @tap="$wanlshop.back(1)">
					<text class="wlIcon-fanhui1"></text>
				</view>
				<view class="search-form round">
					<text class="wlIcon-sousuo1 text-bold"></text>
					<input type="text" maxlength="12" confirm-type="search" placeholder-style="color: #ccc"
						:placeholder="searchValue ? searchValue : `搜索城市`"
						@confirm="doneInput" @input="doneInput"/>
				</view>
			</view>
		</view>

		<scroll-view class="w100" scroll-y="true" :scroll-into-view="scrollIntoId" :style="{height:scrollHeight}"
			@touchmove.stop.prevent>
			<view v-if="disdingwei" id="hot">
				<!-- 定位模块 -->
				<view class="dingwei">
					<view class="grey flexa fsmall">
						当前定位
					</view>
					<view class="dingwei_city">
						<view class="dingwei_city_one" @tap="paramClick(city)">
							<text  v-if="city">{{city}}</text>
							<text v-else>定位中</text>
						</view>
						<view class="bold blue fmiddle" @click="getWarpweft">
							<text>{{po_tips}}</text>
						</view>
					</view>
				</view>

				<!-- 最近模块 -->
				<!-- <view class="dingwei" v-if="cacheLocation">
					<view class="grey flexa fsmall">
						最近访问
					</view>
					<view class="dingwei_city dingwei_city_zuijin">
						<view class="dingwei_city_one" v-for="(item,index) in list" :key="index"   @tap="back_city(item)">
							{{item.city_name}}
						</view>
					</view>
				</view> -->
				<!-- 热门 -->
				<view class="dingwei" v-if="hotList">
					<view class="grey flexa fsmall">
						选择配送分仓
					</view>
					<view class="dingwei_city dingwei_city_zuijin">
						<view class="dingwei_city_one" v-for="(item,index) in hotList" :key="index"
							@tap="to_city(item.categoryname)">
							{{item.categoryname}}
						</view>
					</view>
				</view>

			</view>


			<!-- 城市列表 -->
			<view v-if="searchValue == ''" v-for="(item, index) in list" :id="item.idx" :key="item.idx">
				<view class="letter-header bold">{{ item.idx }}</view>
				<view class="city-div" v-for="(city, i) in item['cities']" :key="i" @tap="back_city(city)">
					<text class="city">{{ city.city_name }}</text>
				</view>
			</view>

			<!-- 搜索结果 -->
			<view class="city-div" v-for="(item, index) in searchList" :key="index" @tap="back_city(item)">
				<text class="city">{{ item.city_name }}</text>
			</view>

			<view class="placeholder footer"></view>
		</scroll-view>

		<!-- 右侧字母 -->
		<!-- <view class="letters"  id="list" v-if="searchValue == ''"  @touchstart="touchStart" @touchmove.stop.prevent="touchMove" @touchend="touchEnd">
			<view class="fmin" @click="scrollTo('hot')">最近</view>
			<view class="fmin"  v-for="item in letter" :key="item.idx">{{ item.idx }}</view>
		</view> -->

		<!-- 选中之后字母 -->
		<!-- <view class="mask" v-if="touchmove">
			<view class="mask-r bold">{{scrollIntoId}}</view>
		</view> -->
	</view>
</template>

<script>
	import QQMapWX from '@/libs/qqmap-wx-jssdk.min.js'
	import Citys from '@/libs/index.list.js';
	export default {

		data() {
			return {
				statusBar: '0px',
				customBar: '45px',

				winHeight: 0,
				itemHeight: 0,
				winOffsetY: 0,
				touchmove: false,


				scrollHeight: this.statusBarHeight,
				ImgUrl: this.ImgUrl,
				letter: [],

				searchValue: '',
				scrollIntoId: '',
				list: [],
				tId: null,
				searchList: [],
				//北京上海广州深圳杭州南京苏州重庆西安长沙昆明天津武汉济南青岛福州厦门成都武汉宁波东莞南昌合肥佛山沈阳哈尔滨
				hotList: ["平邑"],
				showMask: false,
				disdingwei: true,
				cacheLocation: '', //最近访问
				position: '', //定位获取的位置

				po_tips: '重新定位',
				hotCity: '',
				city: ''
			}
		},
		watch: {
			list() {
				setTimeout(() => {
					// this.setList()
				}, 100)
			}
		},

		onLoad() {
			this.scrollHeight = uni.getSystemInfoSync().windowHeight - parseInt(this.customBar) + 'px'
			//获取存储的最近访问
			var that = this
			// that.getIP()
			this.getMapAddress()
			this.getHotList()
			// uni.getStorage({
			// 	key: 'location_key',
			// 	success: function(res) {
			// 		that.cacheLocation = res.data
			// 	}
			// });
			// //获取定位 经度纬度
			// that.getWarpweft()

			// let cityLen = Citys.data.city_nav
			this.letter = Citys.index;
			this.list = Citys.list;
			// this.hotCity = Citys.data.hot_city; 
		},
		onShow(){
			// this.getMapAddress()
		},
		methods: {
			async getHotList() {

				await uni.request({
					url: '/api/home/get_hot_list',
					data: {},
					success: res => {
						this.hotList = res.data
					}
				});
			},
			getIP() {
				//你自己实现 返回上一页
				uni.request({
					url: 'https://pv.sohu.com/cityjson?ie=utf-8',
					method: 'POST',
					success: (res) => {
						const reg = /\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/;
						let ip = reg.exec(res.data);
						console.log(ip[0]);
						this.getCity(ip[0])
					}
				})
			},
			async getCity(ip) {

				let res = await api.goodDetails(this.id);
				if (res.status == 1) {
					this.city = res.data
				}
			},
			setList() {
				uni.createSelectorQuery()
					.in(this)
					.select('#list')
					.boundingClientRect()
					.exec(ret => {
						this.winOffsetY = ret[0].top
						this.winHeight = ret[0].height
						this.itemHeight = this.winHeight / this.list.length
					})

			},
			touchStart(e) {
				this.touchmove = true
				let pageY = e.touches[0].pageY
				let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight)
				if (this.list[index]) {
					this.scrollIntoId = this.list[index].idx
				}
			},
			touchMove(e) {
				let pageY = e.touches[0].pageY
				let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight)
				if (this.list[index] && this.list[index].idx === this.scrollIntoId) {
					return false
				}
				if (this.list[index]) {
					this.scrollIntoId = this.list[index].idx
				}
			},
			touchEnd() {
				this.touchmove = false
				this.touchmoveIndex = -1
			},

			doneInput() {
				uni.hideKeyboard()
			},
			move(e) {
				console.log(111, e);
			},
			getId(index) {
				return this.letter[index];
			},
			query(source, text) {
				let res = [];
				var self = this;
				let len = source.length
				var text = text.toLowerCase()
				for (let i = 0; i < len; i++) {
					//单字母搜索
					if (text.length == 1 && /^[a-zA-Z]$/.test(text)) {
						let arr = []
						let idx = text.toUpperCase()
						if (idx == source[i].idx) {
							console.log(222, source[i]);
							return source[i].cities
						}
					}
					//其它搜索
					if (source[i].cities) {
						let _len = source[i].cities.length
						for (var n = 0; n < _len; n++) {
							let _item = source[i].cities[n]
							if (new RegExp('^' + text).test(_item.city_name)) {
								res.push(_item);
								continue;
							}
							if (new RegExp('^' + text).test(_item.city_pinyin)) {
								res.push(_item);
								continue;
							}
							if (new RegExp('^' + text).test(_item.py)) {
								res.push(_item);
								continue;
							}

						}
					}
				}

				return res;
			},

			isString(obj) {
				return typeof obj === 'string';
			},

			onInput(e) {
				const value = e.target.value;
				if (value !== '' && this.list) {
					const queryData = this.query(this.list, String(value).trim());
					this.searchList = queryData;
					this.disdingwei = false
				} else {
					this.searchList = [];
					this.disdingwei = true
				}
			},
			to_city(item, hasLocation = false) {
				// console.log(333,item);
				// this.$store.commit('getCity',item.city_name)
				// console.log(item)
				uni.setStorageSync('city_name', item)
				uni.switchTab({
					url: '/pages/index'
				})
			},
			back_city(item, hasLocation = false) {
				// console.log(333, item);
				this.$store.commit('getCity', item.city_name)
				uni.navigateTo({
					url: '/pages/consultant/list?name=' + item.city_name
				})
				// uni.switchTab({
				// 	url:'/pages/home/index'
				// })
				if (item) {
					//是否是定位 
					if (hasLocation) {
						item = {
							city_name: item.city,
							location: item
						}
					}
					uni.$emit('selectCity', item);
					//unshift 把数据插入到首位，与push相反
					if (!this.cacheLocation) this.cacheLocation = []
					this.cacheLocation.unshift(item)
					this.searchValue = "";
					this.disdingwei = true
					var arr = this.cacheLocation
					//数组去重
					function distinct(arr) {
						let newArr = []
						for (let i = 0; i < arr.length; i++) {
							if (newArr.indexOf(arr[i]) < 0) {
								newArr.push(arr[i])
							}
						}
						return newArr
					}
					this.cacheLocation = distinct(arr).slice(0, 5)
					uni.setStorage({
						key: 'location_key',
						data: this.cacheLocation
					});
				}
				this.back()
			},
			getWarpweft() {
				//自己写吧
				var that = this
				that.po_tips = '定位中...'
				setTimeout(() => {
					that.po_tips = '重新定位'
				})
			},
			async getAddress() {
				// console.log(999)

				await uni.request({
					url: '/api/home/get_hot_list',
					data: {
						latitude: this.latitude,
						longitude: this.longitude
					},
					success: res => {
						this.result = res.result
						// this.city = res.result.address_component.city
					}
				});

			},
			getMapAddress() {
				
				let that = this;
				console.log(888)
				const tMap = new QQMapWX({
					key: 'CIIBZ-4XVCJ-KD3FL-FUH5E-K6W35-7IBZQ' //开发者密钥
				});
				//使用 uni.getLocation获取用户所在经纬度
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						// console.log(res)
						console.log("获取经纬度成功");
						that.latitude = res.latitude;
						that.longitude = res.longitude;
						// that.getAddress()
						
						tMap.reverseGeocoder({
							location: {
								latitude: that.latitude,
								longitude: that.longitude
							},
							get_poi: 1,
							poi_options: 'policy=2;radius=3000;page_size=20;page_index=1',
							success: function(res1) {
								// console.log(res);
								// that.addressList = res.result.pois
								that.city = res1.result.address_component.city
							
								// uni.showModal({
								// 	content: that.city,
								// 	showCancel: false
								// });
								console.log(890)
								console.log(that.city)
							},
							fail: function(res) {
								console.log(res);
							},
							complete: function(res) {
								console.log(res);
							}
						});
					},
					fail: () => {
						// console.log(888)
						console.log("获取经纬度失败");
					},
					complete: () => {
						// console.log(111)
						// 使用腾讯sdk的reverseGeocoder方法 解析经纬度
					}
				})
			},
			//点击城市时触发,event = {id,name,spell}
			paramClick(item) {
				this.city = item;
				uni.setStorageSync('city_name', item)
				uni.switchTab({
					url: '/pages/index'
				})
			}
		}
	};
</script>

<style scoped>
	
	page{
		background: #fff;
	}
	.fsmall {
		font-size: 26rpx;
	}

	.fmiddle {
		font-size: 28rpx;
	}

	.blue {
		color: #005a93;
	}

	.bold {
		font-weight: 600;
	}

	.flex {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.mask {
		position: fixed;
		z-index: 3;
		top: 40%;
		left: 40%;
	}

	.mask-r {
		height: 120rpx;
		width: 120rpx;
		border-radius: 60rpx;
		display: flex;
		background: rgba(0, 0, 0, 0.5);
		backdrop-filter: blur(5px);
		justify-content: center;
		align-items: center;
		font-size: 40rpx;
		color: #FFFFFF
	}

	.content {
		height: 100%;
		width: 100%;
		background-color: #ffffff;
	}

	.header {
		width: 100%;
		position: relative;
		z-index: 8;
		background-color: #FFFFFF;
	}


	.back_div {
		width: 100rpx;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.back_img {
		width: 35rpx;
		height: 35rpx;
	}

	.input {
		font-size: 34rpx;
		width: 600rpx;
		height: 60rpx;
		max-height: 60rpx;
		border-radius: 10rpx;
		background-color: #F5F5F5;
		padding-left: 20rpx;
		padding-right: 20rpx;
		box-sizing: border-box;
	}

	.title {
		font-size: 30rpx;
		color: white;
	}

	.show {
		left: 0;
		width: 100%;
		transition: left 0.3s ease;
	}

	.hide {
		left: 100%;
		width: 100%;
		transition: left 0.3s ease;
	}


	.title {
		font-size: 30rpx;
		color: white;
	}

	.letters {
		position: absolute;
		right: 0;
		width: 80rpx;
		color: #333333;
		top: 25%;
		text-align: center;
		font-size: 24rpx;
		font-weight: 510;
	}

	.letters .fmin {}


	.letter-header {
		font-size: 28rpx;
		padding-left: 40rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;

	}

	.city-div {
		width: 660rpx;
		margin: auto;
		padding: 20rpx 0;
		border-bottom-width: 0.5rpx;
		border-bottom-color: #ebedef;
		border-bottom-style: solid;
		display: flex;
		align-items: center;
	}

	.city {
		font-size: 36rpx;
		color: #000000;
		padding-left: 30rpx;
	}

	.dingwei {
		width: 90%;
		margin: auto;
		padding-top: 25rpx;
		box-sizing: border-box;
		margin-bottom: 26rpx;
	}

	.dingwei .grey {
		margin-bottom: 25rpx;
	}

	.dingwei_city {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}

	.dingwei_city_one {
		height: 60rpx;
		background-color: #F5F5F5;
		border-radius: 30rpx;
		font-size: 34rpx;
		padding: 0 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 20rpx 20rpx 0;
	}


	.dingweis {
		width: 32rpx;
		height: 32rpx;
	}

	.dingwei_city_zuijin {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}
</style>